<template>
	<div id="s_head_v1" v-if="dUserinfo" :style="ss">
		<div class="bigsheadCon" @click="url_jump">
			<div class="bigshead" :style="bigsheadstyle">
				<img :src="src" class="shead"  @error="onerror" :style="sheadstyle" ref="s_head" alt="头像">
				<div class="truenameiconCon" v-if="dUserinfo.istruenamecheck" :style="truenameiconConStyle">
					<img src="http://topart.cn/Public/images/truename.png" class="truenameicon" alt="实名图标">
				</div>
			</div>
			<slot name="righttxt"></slot>
		</div>
		<slot name="username" v-if="is_show_username">
			<span class="username">{{dUserinfo.username}}</span>
		</slot>
	</div>
</template>
<script type="text/javascript">
	module.exports={
		props:{
			userinfo:{
				type:[Object,Array],
				default:null,
				required:true
			},
			scale:{
				type:[Number],
				default:1.0
			},
			is_show_username:{
				type:Boolean,
				default:true
			},
			height:{
				type:String,
				default:'2rem'
			},
			width:{
				type:String,
				default:'2rem'
			},
			margin:{
				type:String,
				default:'left'
			},
			is_jump:{
				type:Boolean,
				default:true
			},
      color:{
			  type:String,
        default:"#000"
      }
		},
		data(){
			return {
				dUserinfo:this.userinfo,
				default_img:'/Public/images/avatar.jpg',
			}
		},
		watch:{
			userinfo(n,o){
				this.dUserinfo = n
			}
		},
		computed:{
			src:function(){
				let _this = this

				let s_head  = _this.dUserinfo.s_head
				if(s_head == undefined)return _this.default_img
				if (s_head.indexOf('http:')>-1) {
					return s_head.replace('http:','https:')
				}else if(s_head.indexOf('https:')>-1){
					return s_head;
				}else{
					return '/Uploads/'+s_head
				}
			},
			ss(n,o){
				let _this=this
				return {
					transform: 'scale('+_this.scale+')',
          color: _this.color
				}
			},
			bigsheadstyle(n,o){
        let _this = this
				return {
					width:_this.width,
					height:_this.height,
					margin:_this.margin
				}
			},
			sheadstyle(n,o){
        let _this = this
				return {
					width:_this.width,
					height:_this.height
				}
			},
			truenameiconConStyle(n,o){
        let _this = this
        let defaultWidth = parseFloat("2rem".replace('rem',''))
        let setWidth = parseFloat(_this.width.replace('rem',''))
        let scale = setWidth/defaultWidth
				return {
					transform:'scale('+scale+') translateX(-'+(1-scale)*2+'rem)',
				}
			}
		},
		methods:{
			url_jump(){
        let _this=this
				if (_this.is_jump) {
					window.location.href = domain+'/personIndexPackage/?uid='+_this.dUserinfo.uid
				}
			},
			onerror(e){
        let _this=this
				//console.log(e)
				_this.$refs.s_head.src=_this.default_img

			},
		},
		mounted(){

		}
	}
</script>
<style type="text/css" scoped="scoped">
	#s_head_v1{position: relative;}
	.truenameiconCon{position: absolute;bottom: -.4rem;width: 100%;height: 1rem;
		border-radius: 50% 50% 50% 50%;
		overflow: hidden;
		background-color: rgba(255, 255, 255,.8);

	}
	.truenameicon{
		display: block;
		margin: 0 auto;
		margin-top: .05rem;
		width: .5rem;height: .5rem;
	}
	.bigsheadCon{}
	.bigshead{
		position: relative;
		display: block;
    border-radius: 50%;
		overflow: hidden;
	}
	.shead{
		display: block;
		border-radius:50%;
	}
	.username{margin-top: .4rem;font-size: .5rem;text-align: center;width: 10rem;height: auto;display: block}
</style>
